<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
        width: 800px; height: 600px; border: #000 1px solid;
        border-spacing: 0px;}
        td{border: 1px solid #000;}
    </style>
    
</head>
<body>

<script>
    var tab1 = "<table>"
    for(var i = 1; i<=9; i++){
         tab1+= "<tr>"
        for(var b = 1; b<=9; b++){
        var c = i*b
       tab1+=(`<td>${i}*${b}=${c}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>`)
        }
       
        tab1+= "</tr>"
    }
    tab1+="</table>"
    document.write(tab1)
    var tab2 = "<table>"
    for(var i = 1; i<=9; i++){
         tab2+= "<tr>"
        for(var b = 1; b<=i; b++){
        var c = i*b
       tab2+=(`<td>${i}*${b}=${c}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>`)
        }
       
        tab2+= "</tr>"
    }
    tab2+="</table>"
    document.write(tab2)
    var tab4 = "<table>"
    for(var i = 9; i>=1; i--){
         tab4+= "<tr>"
        for(var b = 1; b<=i; b++){
        var c = i*b
       tab4+=(`<td>${i}*${b}=${c}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>`)
        }
       
        tab4+= "</tr>"
    }
    tab4+="</table>"
    document.write(tab4)
    var tab3 = "<table>"
    for(var i = 9; i>=1; i--){
         tab3+= "<tr>"
        for(var b = 9; b>=i; b--){
        var c = i*b
       tab3+=(`<td>${i}*${b}=${c}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>`)
        }
       
        tab3+= "</tr>"
    }
    
    tab3+="</table>"
    document.write(tab3)
    for(var q = 1; q<=10; q++){
        for(var w = 1; w<=q; w++){

        }
    }
</script>  
</body> 

</html>